<template>
  <div class="" style="width:100%">
    <div ref="box" style="width:100%;height:200px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.box)
    var option = {
      title: [
        // 第一个标题
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16px',
            fontWeight: '700'
          },
          subtext: '待取件 39',
          left: '8%',
          top: '82%',
          textAlign: 'center'
        },
        // 第二个标题
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16px',
            fontWeight: '700'
          },
          subtext: '待派件 50',
          left: '35%',
          top: '82%',
          textAlign: 'center'
        },
        // 第三个标题
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16px',
            fontWeight: '700'
          },
          subtext: '未分配运输 70',
          left: '62%',
          top: '82%',
          textAlign: 'center'
        },
        // 第死个标题
        {
          subtextStyle: {
            color: '#000',
            fontSize: '16px',
            fontWeight: '700'
          },
          subtext: '超时运输 35',
          left: '89%',
          top: '82%',
          textAlign: 'center'
        }
      ],
      series: [
        // 第一个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['10%', '50%'],
          data: [0.5],
          itemStyle: {
            color: '#e35c3f',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#e35c3f'
            }
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第二个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['36%', '50%'],
          data: [0.6],
          itemStyle: {
            color: '#ffc45e',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ffc45e',
              shadowBlur: 20
            }
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第三个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['63%', '50%'],
          data: [0.4],
          itemStyle: {
            color: '#ffb45d'
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ffb45d',
              shadowBlur: 20
            }
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        },
        // 第四个球
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['90%', '50%'],
          data: [0.6],
          itemStyle: {
            color: '#edde83',
            shadowBlur: 20
          },
          outline: {
            borderDistance: 4,
            color: '#156ACF',
            itemStyle: {
              borderWidth: 2,
              borderColor: '#edde83',
              shadowBlur: 20
            }
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          label: {
            fontSize: 16,
            color: 'black',
            fontWeight: '400',
            insideColor: '#000'
          }
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style>

</style>
